/** test 6 */

<template>
  <div>
    <h1>FCText</h1>
    <h1>using children</h1>
    <FCText>this is text children</FCText>
    <h1>using value</h1>
    <FCText value="this is text value" />
    <h1>using label</h1>
    <FCText label="this is text label" />
    <h1>using v-model</h1>
    <FCText v-model="textVModel" />
    <hr />
    <h1>FCButton</h1>
    <h1>using children</h1>
    <FCButton
      :type="buttonType"
      @click="handleButtonClick"
      :disabled="buttonDisabled"
      >button children</FCButton
    >
    <h1>using value</h1>
    <FCButton
      value="button value"
      :type="buttonType"
      :disabled="buttonDisabled"
      @click="handleButtonClick"
    />
    <h1>using label</h1>
    <FCButton
      label="button label"
      :type="buttonType"
      :disabled="buttonDisabled"
      @click="handleButtonClick"
    />
    <h1>using v-model</h1>
    <FCButton
      v-model="buttonVModel"
      :type="buttonType"
      :disabled="buttonDisabled"
      @click="handleButtonClick"
    />
    <hr />
    <h1>FCInput</h1>
    <h1>no value</h1>
    <FCInput />
    <h1>using value</h1>
    <FCInput :value="inputValue" />
    <h1>using v-model</h1>
    <FCInput v-model="inputVModel" />
    <hr />
    <div>form values: {{ this.form.getFieldsValue() }}</div>
    <a-form :form="form">
      <a-form-item label="a with label">
        <FCText
          v-decorator="[
            'a',
            {
              initialValue: 11,
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="b with button">
        <FCButton
          v-decorator="[
            'b',
            {
              initialValue: 'button b',
            },
          ]"
          :type="buttonType"
          :disabled="buttonDisabled"
          @click="handleButtonClick"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import FCText from './fc-ui/FCText'
import FCButton from './fc-ui/FCButton'
import FCInput from './fc-ui/FCInput'

export default {
  name: 'formTest6',
  components: {
    FCText,
    FCButton,
    FCInput,
  },

  FCTextprops: {},
  data() {
    return {
      form: this.$form.createForm(this),
      textVModel: 'text v-model',
      buttonVModel: 'button v-model',
      buttonType: 'primary',
      buttonDisabled: false,
      inputValue: 'input value',
      inputVModel: 'input v-model',
    }
  },
  methods: {
    handleButtonClick() {
      console.log('now handle button click')
    },
  },
  mounted() {
    this.form.setFieldsValue({ a: 'a in mounted', b: 'b in mounted' })
  },
}
</script>

<style></style>
